import * as React from 'react';
import { ThemeProvider } from '@mui/material/styles';
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Header from '../header/Header'
import Home from '../home/home'
import CountryDetailPage from '../countryDetailPage/countryDetailPage';
import useComtomTheme from '../../hooks/useCustomTheme';
import useCountriesData from '../../hooks/useCountriesData';


export default function App() {
  const { mode, theme, toggleTeme } = useComtomTheme();
  const { loading, countries } = useCountriesData();
  return (
    <Router>
      <ThemeProvider theme={theme}>
      <Header mode={mode} toggleTeme={toggleTeme} />
      <Routes>
            <Route
              path="/"
              element={
                <Home mode={mode} />
              }
            />
            <Route
              path="/:countryName"
              element={<CountryDetailPage mode={mode}  loading={loading} countries={countries}/>}
            />
          </Routes>
    </ThemeProvider>
    </Router>

  );
}
